<template>
  <el-col :span="3" class="flexBtn">
    <el-button
      type="primary"
      size="small"
      :loading="isLoading"
      @click="handleSearch"
      >查询</el-button
    >
    <el-button size="small" @click="handleRest">重置</el-button>
  </el-col>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'SearchBtn',
  emits: ['handleSearch', 'handleRest'],
  setup(props, context) {
    const isLoading = ref(false)
    const handleSearch = () => {
      isLoading.value = true
      context.emit('handleSearch')
    }
    const handleRest = () => {
      context.emit('handleRest')
    }

    const handleCloseLoading = () => {
      isLoading.value = false
    }

    return {
      isLoading,
      handleSearch,
      handleRest,
      handleCloseLoading
    }
  }
})
</script>

<style scoped>
.flexBtn {
  padding-left: 20px;
}
</style>
